<!DOCTYPE html>
{% load staticfiles %}
<html>
    <head>
        <meta charset="UTF-8" />
        <title>登录</title>
        <script src="{% static 'js/jquery.min.js' %}"></script>
        <script src="{% static 'js/icheck.js' %}"></script>
        <script src="{% static 'js/login_experience.js' %}"></script>
        <link rel="stylesheet" href="{% static 'css/blue.css' %}" />
        <link rel="stylesheet" href="{% static 'css/login.css' %}" />
    </head>

    <body>
        <div class="box">
            <div class="logo">
                <img src="{% static 'logo.png' %}" alt="" />
            </div>
            <main>
                <form class="form" method="POST">
                    {% csrf_token %}
                    <div class="form__cover"></div>
                    <div class="form__loader">
                        <div class="spinner active">
                            <svg
                                class="spinner__circular"
                                viewBox="25 25 50 50"
                            >
                                <circle
                                    class="spinner__path"
                                    cx="50"
                                    cy="50"
                                    r="20"
                                    fill="none"
                                    stroke-width="4"
                                    stroke-miterlimit="10"
                                ></circle>
                            </svg>
                        </div>
                    </div>
                    <div class="form__content">
                        <h1>登录用户</h1>
                        <div class="styled-input">
                            <input
                                type="text"
                                class="styled-input__input"
                                name="username"
                                autocomplete="off"
                                readonly
                                onfocus="this.removeAttribute('readonly')"
                                value="{{username}}"
                                autofocus
                            />
                            <div class="styled-input__placeholder">
                                <span class="styled-input__placeholder-text"
                                    >用户名</span
                                >
                            </div>
                            <div class="styled-input__circle"></div>
                        </div>
                        <div class="styled-input">
                            <input
                                type="password"
                                class="styled-input__input"
                                autocomplete="off"
                                readonly
                                onfocus="this.removeAttribute('readonly')"
                                name="password"
                            />
                            <div class="styled-input__placeholder">
                                <span class="styled-input__placeholder-text"
                                    >密码</span
                                >
                            </div>
                            <div class="styled-input__circle"></div>
                        </div>
                        <div class="remember">
                            <label for="check"
                                ><input
                                    type="checkbox"
                                    id="“check”"
                                    name="check"
                                    value="1"
                                    {{check}}
                                />记住我</label
                            >
                            <a href="">忘记密码</a>
                        </div>
                        <button type="button" class="styled-button">
                            <span class="styled-button__real-text-holder">
                                <span class="styled-button__real-text"
                                    >登录</span
                                >
                                <span class="styled-button__moving-block face">
                                    <span class="styled-button__text-holder">
                                        <span class="styled-button__text"
                                            >登录</span
                                        >
                                    </span> </span
                                ><span class="styled-button__moving-block back">
                                    <span class="styled-button__text-holder">
                                        <span class="styled-button__text"
                                            >登录</span
                                        >
                                    </span>
                                </span>
                            </span>
                        </button>
                        <div class="errmsg">{{errmsg}}</div>
                        <a href="{% url 'user:register' %}">
                            <button type="button" class="styled-button">
                                <span class="styled-button__real-text-holder">
                                    <span class="styled-button__real-text"
                                        >注册</span
                                    >
                                    <span
                                        class="styled-button__moving-block face"
                                    >
                                        <span
                                            class="styled-button__text-holder"
                                        >
                                            <span class="styled-button__text"
                                                >注册</span
                                            >
                                        </span> </span
                                    ><span
                                        class="styled-button__moving-block back"
                                    >
                                        <span
                                            class="styled-button__text-holder"
                                        >
                                            <span class="styled-button__text"
                                                >注册</span
                                            >
                                        </span>
                                    </span>
                                </span>
                            </button></a
                        >
                    </div>
                </form>
            </main>
        </div>
        <footer>
            <div class="line"></div>
            <ul>
                <li><a href="">关于我们</a></li>
                <li>|</li>
                <li><a href="">联系我们</a></li>
                <li>|</li>
                <li><a href="">招聘人才</a></li>
                <li>|</li>
                <li><a href="">友情链接</a></li>
            </ul>
            <p>CopyRight © 2016 A技术有限公司 All Rights Reserved</p>
            <p>电话：010-****888 京ICP备*******8号</p>
        </footer>
        <script src="{% static 'js/login.js' %}"></script>
    </body>
</html>
